<template>
  <publish-sucess-heade/>
  <div class="publish-success">
    <div class="header">
      <router-link to="/manage-posts" class="back-link">&lt; 管理博文</router-link>
    </div>

    <div class="content">
      <img src="/public/successPubish.png" alt="发布成功" class="success-icon" >
      <h2>发布成功！</h2>
      <div class="buttons">
        <button @click="viewArticle">查看文章</button>
        <button @click="reEdit">重新编辑</button>
        <button @click="writeMore">再写一篇</button>
      </div>

      <div class="share-options">
        <span>分享至</span>
  <div class="icons">
<button class="icon-wechat" @click="generateWeChatQRCode">
  <img src="/public/weixin.png" alt="微信" width="40"/>
</button>
<button class="icon-qq" @click="shareToQQ">
  <img src="/public/qq.png" alt="QQ" width="40"/>
</button>
<button class="icon-link" @click="copyArticleLink">
  <img src="/public/link.png" alt="链接" width="40"/>
</button>
      <!-- <button class="icon-app">
        <img src="/public/app.png" alt="app" width="40"/>
      </button> -->
    <button class="icon-more">
      <img src="/public/more.png" alt="更多" width="40"/>
    </button>
  </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter,useRoute } from 'vue-router'
import PublishSucessHeade from '@/components/PublishSucessHeade.vue'
import messagePost from '../utils/message.js'

import QRCode from 'qrcode'

const generateWeChatQRCode = () => {
  const articleId = route.params.articleId;
  const articleUrl = window.location.origin + `/article/${articleId}`;
  console.log(articleUrl);
  

  // 创建 canvas 元素用于渲染二维码
  const canvas = document.createElement('canvas');
  QRCode.toCanvas(canvas, articleUrl, { errorCorrectionLevel: 'H' }, (err) => {
    if (err) {
      console.error(err);
      return;
    }

    // 弹出二维码图片
    const imgDataUrl = canvas.toDataURL('image/png');
    const qrWindow = window.open('', '_blank', 'width=300,height=300');
    qrWindow.document.write(`<img src="${imgDataUrl}" width="100%" />`);
  });
};

const copyArticleLink = () => {
  const articleId = route.params.articleId;
  const articleUrl = window.location.origin + `/article/${articleId}`;

  navigator.clipboard.writeText(articleUrl).then(() => {
    // alert('链接已复制到剪贴板！');
    messagePost({
      message: '链接已复制到剪贴板！',
      type: 'success'
    })
  }).catch(err => {
    // console.error('复制失败:', err);
    // alert('复制失败，请手动复制。');
    messagePost({
      message: '复制失败，请手动复制。',
      type: 'error'

    })
  });
};

const shareToQQ = () => {
  const articleId = route.params.articleId;
  const articleUrl = encodeURIComponent(window.location.origin + `/article/${articleId}`);
  const title = encodeURIComponent("我刚刚发布了一篇精彩文章");
  console.log(articleUrl);
  
  const qqShareUrl = `https://connect.qq.com/widget/shareqq/index.html?url=${articleUrl}&title=${title}`;

  window.open(qqShareUrl, '_blank');
};

const route = useRoute()
const router = useRouter()

function viewArticle() {
  // 跳转到文章详情页
  const id = route.params.articleId
  console.log('点击了帖子:', id);
  router.push('/article/'+id)
}

function reEdit() {
  // 跳转到编辑页面并携带文章 ID
  // const id = router.params.id
  // router.push('/article/'+id)
}

function writeMore() {
  // 跳转到创建文章页面
  router.push('/createArticle')
}
</script>

<style scoped>

.publish-success {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
}

.header {
  position: absolute;
  top: 20px; /* 距离顶部 10px */
  left: 30px; /* 距离左侧 10px */
}

.header .back-link {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s; 
}

.header .back-link:hover {
  color: #ff6600; /* 鼠标悬停时的颜色 */
}

.content {
  margin-top: 20px;
}

.success-icon {
  /* width: 120px;*/
  height: 100px; 
  margin-bottom: 10px;
}

h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

/* .reward-box {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
} */

/* .reward-left img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
} */

/* .reward-right p {
  font-size: 16px;
  color: #333;
}

.reward-right small {
  font-size: 12px;
  color: #999;
} */

.buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
}

.buttons button:nth-child(1) {
  background: #f0f0f0;
  color: #333;
}

.buttons button:nth-child(2) {
  background: #e0e0e0;
  color: #333;
}

.buttons button:nth-child(3) {
  background: #ff6600;
  color: #fff;
}

.share-options span {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.icons button {
  display: inline-flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 5px;
  color: #fff;
  font-size: 16px;
  background-color: transparent;
  border: none;            /* 去掉默认边框 */
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icons button:hover {
  transform: scale(1.1);
}

.icons .icon-wechat {
  background: #7acb1c;
}

.icons .icon-qq {
  background: #46a3f7;
}

.icons .icon-link {
  background: #fbbd08;
}

.icons .icon-app {
  background: #e54d42;
}

.icons .icon-more {
  background: #999;
}
</style>